import Button from "../Button";

const First = ()=>{
    return (
        <>
            <div className="w-full h-[600px] flex flex-wrap justify-between items-center relative">
                <div className="absolute w-[600px] h-[200px] 
                        bg-gradient-to-br from-cyan-100  to-pink-100 blur-3xl
                        rounded-3xl shadow-xl
                        rotate-[20deg] -translate-x-6
                        "></div>
                <div className="w-[40%] flex flex-col  justify-center gap-5
                 relative">
                    <div className="text-5xl font-bold">Faway</div>
                    <div>欢迎来到Faway,这里有中国各地的风景图片,互动社区,问答功能、旅行活动推荐、旅游资讯以及旅行故事</div>
                    <div>
                        <Button label="了解更多" rounded onClick={()=>{}}/>
                        <Button label="加入我们" outline rounded onClick={()=>{}}/>
                    </div>
                </div>
                <div className="w-1/2 h-full flex justity-end gap-5 py-2">
                    <div className=""></div>
                    <div className="w-[35%] h-1/2 mt-[50px]">
                        <img src={require("../../assets/banner-1.jpg")}
                            className="object-fill rounded-lg" alt="" />
                    </div>
                    <div className="w-2/5 h-3/5 mt-[120px]">
                        <img src={require("../../assets/banner-2.jpg")} 
                        className="object-fill rounded-lg"
                        alt="" />
                        </div>
                    <div className="w-1/5 h-full">
                        <img src={require("../../assets/banner-3.jpg")} 
                        className="object-fill rounded-lg"
                        alt="" />
                        </div>
                </div>
            </div>
        </>
    );
}

export default First;